<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="jQuery图像照片剪裁插件Jcrop" />
<meta name="description" content="张鑫旭web前端学习之jQuery" />
<meta name="keywords" content="张鑫旭,鑫空间-鑫生活,博客,web前端,css,JavaScript,jQuery,插件,demo页面,学习" />
<meta name="author" content="张鑫旭,zhangxixnu" />
<title>jQuery图像照片剪裁插件Jcrop</title>
<link rel="shortcut icon" href="http://www.zhangxinxu.com/zxx_ico.png" />
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.3.2-min.js"></script>
<script type="text/javascript" src="../js/jquery.Jcrop.js"></script>
<style type="text/css">
.img_pos{padding:0 0 20px 12%; font-family:Verdana, Geneva, sans-serif;}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		//记得放在jQuery(window).load(...)内调用，否则Jcrop无法正确初始化
		$("#xuwanting").Jcrop({
			onChange:showCoords,
			onSelect:showCoords
		});	
		//简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用
		function showCoords(obj){
			$("#x1").val(obj.x);
			$("#y1").val(obj.y);
			$("#x2").val(obj.x2);
			$("#y2").val(obj.y2);
			$("#w").val(obj.w);
			$("#h").val(obj.h);
		}
	});
</script>
</head>

<body>
<div class="zxx_out_box">
    <div class="zxx_in_box">
        <div class="zxx_header">
            <a href="http://www.zhangxinxu.com/">
                <img class="l" src="http://www.zhangxinxu.com/wordpress/wp-content/themes/default/images/index_logo.gif" />
            </a>
            <span class="zxx_author_time">by zhangxinxu 2009-11-12 13:23</span>
        </div> 
        <h1 class="zxx_title">Jcrop照片剪裁插件基本事件程序演示</h1>
        <div class="zxx_main_con">
        	<div class="zxx_test_list">
                <div class="img_pos">
                	<img id="xuwanting" src="../image/xuwanting.jpg" />
                    <br />
                    <form>
                    	<b>x1</b><input type="text" size="4" id="x1" />
                    	<b class="ml5">y1</b><input type="text" size="4" id="y1" />
                    	<b class="ml5">x2</b><input type="text" size="4" id="x2" />
                    	<b class="ml5">y2</b><input type="text" size="4" id="y2" />
                    	<b class="ml5">w</b><input type="text" size="4" id="w" />
                    	<b class="ml5">h</b><input type="text" size="4" id="h" />
                    </form>

                </div>
                <p><strong>基本事件处理程序实例。</strong>这里将一些表单值绑定到了事件处理程序上，当选择或大小改变的时候，表单内的值也会发生实时的改变，x1,y1表示左上角坐标，x2,y2表示右下角坐标，w,h表示剪裁的高度和宽度。多亏了Jcrop的onChange事件处理程序，一切才得以实现。</p>
                <p class="mt20 mb20"><a href="../index.html">&lt;&lt; 返回Demo实例首页</a></p>
                <div class="zxx_code">
                	<div class="mb10 f9 dot"><strong>JavaScript代码</strong></div>
                    <xmp>$(document).ready(function(){
    //记得放在jQuery(window).load(...)内调用，否则Jcrop无法正确初始化
    $("#xuwanting").Jcrop({
        onChange:showCoords,
        onSelect:showCoords
    });	
    //简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用
    function showCoords(obj){
        $("#x1").val(obj.x);
        $("#y1").val(obj.y);
        $("#x2").val(obj.x2);
        $("#y2").val(obj.y2);
        $("#w").val(obj.w);
        $("#h").val(obj.h);
    }
});</xmp>
                </div>
            </div>
        </div>
        <div class="zxx_footer">
            Copyright &copy; by <a href="http://www.zhangxinxu.com/">张鑫旭-鑫空间-鑫生活</a>
            |
            <a href="http://www.zhangxinxu.com/wordpress/?p=359">该篇相关文章</a>
        </div>
    </div>
</div>
</body>
</html>
